.account-container {
    padding: 24rpx;
    background-color: #f7f8fa;
}

/* 卡片样式 */
.account-card {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 32rpx;
    margin-bottom: 24rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease-in-out;
}

.account-card:active {
    transform: scale(0.98);
    opacity: 0.95;
}

.card-title {
    font-size: 26rpx;
    color: #888888;
    margin-bottom: 12rpx;
}

.card-value {
    font-size: 44rpx;
    font-weight: bold;
    color: #333333;
}

/* 栅格化统计区域 */
.grid-box {
    display: flex;
    flex-wrap: wrap;
    gap: 24rpx;
}

.grid-item {
    flex: 1 1 48%;
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}

.grid-label {
    font-size: 26rpx;
    color: #999999;
    margin-bottom: 10rpx;
}

.grid-value {
    font-size: 36rpx;
    font-weight: 600;
    color: #333333;
}


.ui-card-title{
    font-size: 25rpx !important;
}

.doc-card {
    position: relative;
    .doc-card-navigator {
        position: relative;
        z-index: 2;
        overflow: hidden;
    }
    .doc-bg {
        position: relative;
        z-index: 2;
        text-shadow: 2px 3px 5px rgba(0,0,0,.1);
    }
    .doc-title {
        position: relative;
        display: inline-block;
        padding-bottom: 25rpx;
        font-size: 31rpx;
        &::after {
            content: '';
            position: absolute;
            width: calc(100% + 20rpx);
            height: 2px;
            background-color: currentColor;
            left: 0;
            bottom: 0;
        }
    }
    .doc-name {
        position: relative;
        display: block;
        padding-top: 20rpx;
        &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 1px;
            background-color: currentColor;
            left: 0;
            top: 0;
        }
    }
    .doc-text{
        position: relative;
        z-index: 2;
        padding-right: 50px !important;
    }
    .doc-icon{
        position: absolute;
        z-index: 2;
        right: 0;
    }
    .doc-dot {
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        transition: all 0.6s cubic-bezier(.08,.82,.17,1);
        opacity: .3;
        &.doc-dot1 {
            width: 400rpx;
            height: 400rpx;
            left: 0;
            top: auto;
            right: auto;
            bottom: -300rpx;
            filter: hue-rotate(30deg)  brightness(160%);
        }
        &.doc-dot2 {
            left: -40px;
            top: auto;
            right: auto;
            bottom: -20rpx;
            width: 300rpx;
            height: 300rpx;
            filter: brightness(80%);
        }
        &.doc-dot3 {
            top: -120rpx;
            right: -120rpx;
            opacity: 0.6;
            width: 240rpx;
            height: 240rpx;
            filter: brightness(120%);
        }
    }
    .doc-bg {
        position: absolute;
        z-index: 0;
        width: calc(100% - 40rpx);
        height: 30rpx;
        bottom: -15rpx;
        left: 0;
        right: 0;
        margin: auto;
        border-radius: 10rpx;
        // filter: blur(10px);
        opacity: 0.2;
    }

    &:hover {
        .doc-dot1 {
            transform: translateX(-100rpx) translatey(-360rpx);
            filter:  hue-rotate(-30deg) brightness(80%);
        }
        .doc-dot2 {
            transform: translateX(300rpx) translatey(0px);
            filter: brightness(120%);
        }
        .doc-dot3 {
            filter: brightness(80%);
            transform: translateX(-300rpx) translatey(240rpx);
        }
    }
}

.border-bottom::after {
    border-bottom: none;
}

